<template>
  <!-- 系统工具弹窗 -->
  <div class="toolDialog" v-if="isToolShow">
    <transition name="el-zoom-in-top">
      <div class="positonBar" v-show="hideBarFromvuex">
        <div class="tool-item" tabindex="0" @click="handleDialog(1)">
          <div class="tool-icon"><i class="iconfont icon-feedback"></i></div>
          <div class="tool-text">属性纠错</div>
        </div>
        <!-- <div
        class="tool-item"
        tabindex="0"
        @click="handleDialog(7)"
        v-if="roles == '管理员'"
      >
        <div class="tool-icon"><i class="iconfont icon-feedback"></i></div>
        <div class="tool-text">上报审核</div>
      </div>
      <div
        class="tool-item"
        tabindex="0"
        @click="handleDialog(8)"
        v-if="roles != '管理员'"
      >
        <div class="tool-icon"><i class="iconfont icon-feedback"></i></div>
        <div class="tool-text">审核状态</div>
      </div> -->
        <div class="tool-item" tabindex="0" @click="handleDialog(2)">
          <div class="tool-icon"><i class="iconfont icon-legend"></i></div>
          <div class="tool-text">地图图例</div>
        </div>
        <div class="tool-item" tabindex="0" @click="handleDialog(3)">
          <div class="tool-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="tool-text">最近天气</div>
        </div>
        <div class="tool-item" tabindex="0" @click="handleDialog(4)">
          <div class="tool-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="tool-text">图层控制</div>
        </div>
        <div class="tool-item" tabindex="0" @click="handleDialog(5)">
          <div class="tool-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="tool-text">截屏打印</div>
        </div>
        <div class="tool-item" tabindex="0" @click="handleDialog(6)">
          <div class="tool-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="tool-text">制图打印</div>
        </div>
      </div>
    </transition>

    <SuggestSubmitDialog
      v-if="isToolDialogShow"
      :dialogVisible="isToolDialogShow"
      @update:dialogVisible="isToolDialogShow = $event"
    />
    <!-- <MapLegend
      :dialogVisible="isMapLegendShow"
      @update:dialogVisible="isMapLegendShow = $event"
    /> -->
    <RecentWeather
      v-if="isWeatherShow"
      :dialogVisible="isWeatherShow"
      @update:dialogVisible="isWeatherShow = $event"
    />
    <ControlLayer
      v-if="isControlLayerShow"
      :dialogVisible="isControlLayerShow"
      @update:dialogVisible="isControlLayerShow = $event"
    />
    <reviewReport
      v-if="isReviewReportShow"
      :dialogVisible="isReviewReportShow"
      @update:dialogVisible="isReviewReportShow = $event"
    >
    </reviewReport>
    <userReport
      v-if="isUserReportShow"
      :dialogVisible="isUserReportShow"
      @update:dialogVisible="isUserReportShow = $event"
    >
    </userReport>
    <!-- <CutPicPrint
      :dialogVisible="isCutPicPrintShow"
      @update:dialogVisible="isCutPicPrintShow = $event"
    /> -->
    <!-- <MakePicPrint
      :dialogVisible="isMakePicPrintShow"
      @update:dialogVisible="isMakePicPrintShow = $event"
    /> -->
  </div>
</template>

<script>
import SuggestSubmitDialog from "./components/SuggestSubmitDialog.vue";
import MapLegend from "./components/MapLegend.vue";
import RecentWeather from "./components/RecentWeather.vue";
import ControlLayer from "./components/ControlLayer.vue";
import CutPicPrint from "./components/CutPicPrint.vue";
import MakePicPrint from "./components/MakePicPrint.vue";
import reviewReport from "./components/reviewReport.vue";
import userReport from "./components/userReport.vue";
export default {
  name: "OSuggestBar",
  components: {
    userReport,
    SuggestSubmitDialog,
    MapLegend,
    RecentWeather,
    ControlLayer,
    CutPicPrint,
    MakePicPrint,
    reviewReport,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },

  data() {
    return {
      isUserReportShow: false,
      isReviewReportShow: false,
      isControlLayerShow: false,
      isToolDialogShow: false,
      isMapLegendShow: false,
      isWeatherShow: false,
      isCutPicPrintShow: false,
      isMakePicPrintShow: false,
      isShowCutArea: false,
      isShowMakePicArea: false,
      isShowMapPrint: false,
      isToolDialogOpen: true,
      hideBar: true,
    };
  },
  computed: {
    isToolShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    roles() {
      return JSON.parse(localStorage.getItem("userInfo")).roles.name;
    },
    hideBarFromvuex() {
      return this.$store.state.isToolShow;
    },
  },

  methods: {
    handleDialog(index) {
      this.$store.commit("setisToolShow", false);
      switch (index) {
        case 1:
          this.isToolDialogShow = !this.isToolDialogShow;
          this.isMapLegendShow = false;
          this.isWeatherShow = false;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = false;
          this.isMakePicPrintShow = false;
          this.isShowCutArea = false;
          this.isShowMakePicArea = false;
          this.$store.commit("setShowCutArea", this.isShowCutArea);
          this.$store.commit("setShowMakePic", this.isShowMakePicArea);
          break;
        case 2:
          this.isToolDialogShow = false;
          this.isMapLegendShow = !this.isMapLegendShow;
          this.$store.commit("setMapLegendShow", this.isMapLegendShow);
          this.isWeatherShow = false;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = false;
          this.isMakePicPrintShow = false;
          this.isShowCutArea = false;
          this.isShowMakePicArea = false;
          this.$store.commit("setShowCutArea", this.isShowCutArea);
          this.$store.commit("setShowMakePic", this.isShowMakePicArea);
          break;
        case 3:
          this.isToolDialogShow = false;
          this.isMapLegendShow = false;
          this.isWeatherShow = !this.isWeatherShow;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = false;
          this.isMakePicPrintShow = false;
          this.isShowCutArea = false;
          this.isShowMakePicArea = false;
          this.$store.commit("setShowCutArea", this.isShowCutArea);
          this.$store.commit("setShowMakePic", this.isShowMakePicArea);
          break;
        case 4:
          this.isToolDialogShow = false;
          this.isMapLegendShow = false;
          this.isWeatherShow = false;
          this.isControlLayerShow = !this.isControlLayerShow;
          this.isCutPicPrintShow = false;
          this.isMakePicPrintShow = false;
          this.isShowCutArea = false;
          this.isShowMakePicArea = false;
          this.$store.commit("setShowCutArea", this.isShowCutArea);
          this.$store.commit("setShowMakePic", this.isShowMakePicArea);
          break;
        case 5:
          this.isToolDialogShow = false;
          this.isMapLegendShow = false;
          this.isWeatherShow = false;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = !this.isCutPicPrintShow;
          this.isMakePicPrintShow = false;
          this.isShowCutArea = !this.isShowCutArea;
          this.isShowMakePicArea = false;
          this.$store.commit("setShowCutArea", this.isShowCutArea);
          this.$store.commit("setShowMakePic", this.isShowMakePicArea);
          break;
        case 6:
          this.isToolDialogShow = false;
          this.isMapLegendShow = false;
          this.isWeatherShow = false;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = false;
          this.isMakePicPrintShow = !this.isMakePicPrintShow;
          this.isShowMakePicArea = !this.isShowMakePicArea;
          this.isShowCutArea = false;
          this.$store.commit("setShowCutArea", this.isShowCutArea);
          this.$store.commit("setShowMakePic", this.isShowMakePicArea);
          break;
        case 7:
          this.isToolDialogShow = false;
          this.isMapLegendShow = false;
          this.isWeatherShow = false;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = false;
          this.isShowCutArea = false;
          this.isShowMakePicArea = false;
          this.isShowCutArea = false;
          this.isReviewReportShow = !this.isReviewReportShow;
          break;
        case 8:
          this.isToolDialogShow = false;
          this.isMapLegendShow = false;
          this.isWeatherShow = false;
          this.isControlLayerShow = false;
          this.isCutPicPrintShow = false;
          this.isShowCutArea = false;
          this.isShowMakePicArea = false;
          this.isShowCutArea = false;
          this.isReviewReportShow = false;
          this.isUserReportShow = !this.isUserReportShow;
          break;
        default:
      }
    },
  },
};
</script>

<style lang="scss" scoped>
//系统工具弹窗样式
.toolDialog {
  z-index: 2;
  font-size: 0.8rem;
  // background-color: #285383;
  color: white;
  // padding: 10px;
  position: absolute;
  top: 100%;
  // left: 100px;
  width: 165px;
  box-sizing: border-box;
  .positonBar {
    background-color: #285383;
  }

  .tool-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px;
  }
  // .tool-item:hover {
  //     background-color: #4998f2;
  // }
  .tool-item:focus {
    background-color: #4998f2;
  }
  .tool-item:hover {
    background-color: #4998f2;
  }
}
</style>
